import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Switch, Modal, Input } from 'antd';

const SchoolInfoAudit: FC = () => {
  // 表格数据
  const [tableData, setTableData] = useState([
    { key: '1', id: '001', name: '行政单位1', code: 'A123', location: '北京', status: '启用', time: '2024-09-01' },
    { key: '2', id: '002', name: '行政单位2', code: 'B456', location: '上海', status: '禁用', time: '2024-09-02' },
    // 更多数据...
  ]);

  // 表格列配置
  const columns = [
    { title: '编号', dataIndex: 'id', key: 'id' },
    { title: '行政单位名称', dataIndex: 'name', key: 'name' },
    { title: '机构编码', dataIndex: 'code', key: 'code' },
    { title: '行政归属地', dataIndex: 'location', key: 'location' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '开设时间', dataIndex: 'time', key: 'time' },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (_: any, record: any) => (
        <span>
          <Button type="link">编辑</Button>
          <Button type="link">删除</Button>
        </span>
      ),
    },
  ];

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        单位信息管理
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="slectr">
          <div className="selectr" style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ marginRight: '10px' }}>行政单位(名称)</span>
              <Input placeholder="请输入行政单位名称" style={{ width: '200px' }} />
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ marginRight: '10px' }}>行政归属地</span>
              <Select placeholder="请选择行政归属地" style={{ width: '200px' }}>
                <Select.Option value="beijing">北京</Select.Option>
                <Select.Option value="shanghai">上海</Select.Option>
                <Select.Option value="guangzhou">广州</Select.Option>
              </Select>
              <Select placeholder="请选择行政归属地" style={{ width: '200px' }}>
                <Select.Option value="beijing">北京</Select.Option>
                <Select.Option value="shanghai">上海</Select.Option>
                <Select.Option value="guangzhou">广州</Select.Option>
              </Select>
              <Select placeholder="请选择行政归属地" style={{ width: '200px' }}>
                <Select.Option value="beijing">北京</Select.Option>
                <Select.Option value="shanghai">上海</Select.Option>
                <Select.Option value="guangzhou">广州</Select.Option>
              </Select>
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ marginRight: '10px' }}>状态</span>
              <Select placeholder="请选择状态" style={{ width: '200px' }}>
                <Select.Option value="active">启用</Select.Option>
                <Select.Option value="inactive">禁用</Select.Option>
              </Select>
            </div>
          </div>

          {/* 新增行 */}
          <div className="selectr" style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ marginRight: '10px' }}>机构编码</span>
              <Input placeholder="请输入机构编码" style={{ width: '200px' }} />
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ marginRight: '10px' }}>所在地址</span>
              <Select placeholder="请选择所在地址" style={{ width: '200px' }}>
                <Select.Option value="address1">地址1</Select.Option>
                <Select.Option value="address2">地址2</Select.Option>
                <Select.Option value="address3">地址3</Select.Option>
                <Select.Option value="address4">地址4</Select.Option>
                <Select.Option value="address5">地址5</Select.Option>
              </Select>
              <Select placeholder="请选择所在地址" style={{ width: '200px' }}>
                <Select.Option value="address1">地址1</Select.Option>
                <Select.Option value="address2">地址2</Select.Option>
                <Select.Option value="address3">地址3</Select.Option>
                <Select.Option value="address4">地址4</Select.Option>
                <Select.Option value="address5">地址5</Select.Option>
              </Select>
              <Select placeholder="请选择所在地址" style={{ width: '200px' }}>
                <Select.Option value="address1">地址1</Select.Option>
                <Select.Option value="address2">地址2</Select.Option>
                <Select.Option value="address3">地址3</Select.Option>
                <Select.Option value="address4">地址4</Select.Option>
                <Select.Option value="address5">地址5</Select.Option>
              </Select>
              <Select placeholder="请选择所在地址" style={{ width: '200px' }}>
                <Select.Option value="address1">地址1</Select.Option>
                <Select.Option value="address2">地址2</Select.Option>
                <Select.Option value="address3">地址3</Select.Option>
                <Select.Option value="address4">地址4</Select.Option>
                <Select.Option value="address5">地址5</Select.Option>
              </Select>
              <Select placeholder="请选择所在地址" style={{ width: '200px' }}>
                <Select.Option value="address1">地址1</Select.Option>
                <Select.Option value="address2">地址2</Select.Option>
                <Select.Option value="address3">地址3</Select.Option>
                <Select.Option value="address4">地址4</Select.Option>
                <Select.Option value="address5">地址5</Select.Option>
              </Select>
            </div>
          </div>
          <div className="but" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Button type="primary" size="large" style={{ marginRight: '10px' }}>
              开设行政单位
            </Button>
            <div style={{ display: 'flex', gap: '10px' }}>
              <Button type="primary">查询</Button>
              <Button type="primary">重置</Button>
            </div>
          </div>
          <div className="form">
            <Table columns={columns} dataSource={tableData} pagination={{ pageSize: 5 }} />
          </div>
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
